<!-- 首页九宫格 -->
<template>
	<view class="container">
		<!-- 引入公共头部组件 -->
		<HeaderTitle title="我的报表" @confirm="search" @cancel="cancel" :inputValue="queryParam.Conditions[0].keyword"
			:backgroundColor="bgColor" placeholder="请输入报表名称关键字" :isBack="false" :isSearch="isShowList" />

		<!-- 报表下载列表数据 -->
		<view class="list" style="padding-top: 70px;">
			<view>
				<view class="boxFormal" v-for="item in excelListData" :key="item.Id">
					<view class="title" style="font-size:14px">
						报表名称: {{ item.ReportName }}
					</view>
					<view style="padding-left: 20rpx;">
						<view class="">
							<text>报表分类 : {{item.ReportType}}</text>
						</view>
						<view class="">
							<text>创建时间 : {{item.CreateTime}}</text>
						</view>
						<view class="">
							<text>备注 : {{item.Remark}}</text>
						</view>
					</view>
					<view style="padding-right: 15px; padding-left: 10px;text-align: right;">
						<u-button size="mini" @click="details(item)" style="margin-top: 12px;height: 60rpx;"
							:loading="loading" type="primary">查看</u-button>
					</view>
				</view>
			</view>



			<view v-if="isShowList" style="padding-bottom: 20px;">
				<LoadingMore :status="status" :contentText="contentText" :rows="excelListData"></LoadingMore>
			</view>

		</view>
		<view v-if="!isShowList" style="text-align: center;margin: 30rpx auto;padding: 40rpx;">
			<text>用户您好：您暂无WYN报表查看权限，请联系系统管理员分配访问令牌!</text>
		</view>
		<!-- 自定义导航栏组件 -->
		<pyh-tab></pyh-tab>
	</view>
</template>

<script>
	// 引入顶部navbar组件
	import HeaderTitle from '@/components/header/header-title.vue'

	import {
		mapState
	} from "vuex";
	// 引入公共头部组件
	import {
		GetReportFileDirectoryInfo,
		GetReportFileInfosList,
		// 获取播表列表
		ByMoreConditionOfAssign,
		// 获取第三方我的报表系统查看的参数
		Wyn_TokenManagerGetDataList
		// 我的报表查看跳转第三方平台获取的token
	} from "@/api/interface.js";
	export default {
		components: {
			// 公共头部组件
			HeaderTitle
		},
		data() {
			return {
				loading: false,
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},
				click: "返回",
				// 报表下载列表数据
				excelListData: [],
				pagination: {
					PageIndex: 1,
					PageRows: 10,
				},
				Total: 0,
				queryParam: {
					UserId: '',
					IsIN: true,
					Conditions: [{
						Condition: "ReportName",
						keyword: ""
					}]
				},
				sorter: {
					SortField: "Id",
					SortType: "asc"
				},
				// 获取报表系统第三方参数
				TokenManager: [],
				// 第三方系统token
				WynToken: "",
				// 是否显示报表权限提示
				isShowList: false
			};
		},
		onLoad(options) {

			this.queryParam.UserId = this.UserInfo.UserInfo.Id
			console.log('报表获取vuex数据-----------------------', this.queryParam)

		},
		onShow() {

			this.excelListData = [];
			// 获取报表列表数据
			this.getDataListByMoreConditionOfAssign();
			// 获取第三方我的报表系统查看的参数
			this.getWyn_TokenManagerGetDataList()

		},
		// watch:{
		//   $route:{
		//     handler(val,oldval){
		// 		console.log('获取路由--', val, oldval)
		//       // console.log('老路由信息',val, this.curNameKey);//新路由信息
		//       // console.log('新路由信息',oldval,  this.curNameKey);//老路由信息
		//       if(val.path ==="/excel"){
		//         
		//         this.curNameKey = '/ReportFile'
		//       }
		//     },
		//     // 深度观察监听
		//     deep: true
		//   }
		// },
		computed: {
			...mapState(["UserInfo", "bgColor"]),
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pagination.PageIndex = 1
			uni.stopPullDownRefresh();
			this.excelListData = [];
			// 获取报表列表数据
			this.getDataListByMoreConditionOfAssign();
		},
		//上拉加载
		onReachBottom() {
			if (this.status == 'noMore') {
				return;
			}
			this.pagination.PageIndex++;
			// 获取报表列表数据
			this.getDataListByMoreConditionOfAssign();
		},
		methods: {
			getWyn_TokenManagerGetDataList() {
				let UserId = this.UserInfo.UserInfo.Id
				Wyn_TokenManagerGetDataList({
					Search: {
						condition: "UserId",
						keyword: UserId
					}
				}).then(resJson => {
					if (resJson.Success) {
						this.TokenManager.TokenValue = resJson.Data[0].TokenValue
						this.TokenManager.LoginName = resJson.Data[0].LoginName
						this.TokenManager.LoginPwd = resJson.Data[0].LoginPwd
						this.TokenManager.EffectiveDuration = resJson.Data[0].EffectiveDuration
						this.TokenManager.AuthType = resJson.Data[0].AuthType
						this.isShowList = true //不显示报表权限提示
						console.log('获取第三方用户信息参数结果', this.TokenManager)
						// 获取token信息
						// this.getWyn_TokenManager()
					}
				})

			},

			//搜索
			search(value) {
				this.status = "loading"
				console.log('搜索关键词', value)
				this.queryParam.Conditions[0].keyword = value
				// 清空列表数据
				this.excelListData = [];
				// 重新加载
				// 获取报表列表数据
				this.getDataListByMoreConditionOfAssign();
			},
			// 搜索取消
			cancel() {
				this.status = "loading"
				this.pagination.PageIndex = 1
				this.queryParam.Conditions[0].keyword = ""
				// 清空列表数据
				this.excelListData = [];
				// 重新加载
				// 获取报表列表数据
				this.getDataListByMoreConditionOfAssign();
			},


			//   报表列表点击下载
			details(item) {
				var that = this
				console.log('点击报表查看', item)
				uni.navigateTo({
					url: `/pages/webview/webview?url=${ item.ReportUrl}&type=报表&User=${this.TokenManager.LoginName}&Password=${this.TokenManager.LoginPwd}&Lifetime=${this.TokenManager.EffectiveDuration}&ReportName=${item.ReportName}`
				})
			},

			// 获取报表列表
			getDataListByMoreConditionOfAssign() {
				this.status = "loading"
				uni.showLoading({
					title: '加载中'
				})
				ByMoreConditionOfAssign({
					PageIndex: this.pagination.PageIndex,
					PageRows: this.pagination.PageRows,
					Search: this.queryParam,
					...this.sorter
				}).then((resJson) => {
					this.Total = resJson.Data.Total;
					if (resJson.Success) {
						uni.hideLoading()
						//格式化日期
						resJson.Data.forEach(item => {
							item.CreateTime = this.$moment(item.CreateTime).format("YYYY-MM-DD hh:mm");
						})

						if (this.pagination.current == 1) {
							this.excelListData = resJson.Data;
						} else {
							this.excelListData = this.excelListData.concat(resJson.Data);
						}

						if (this.excelListData.length >= resJson.Total) {
							this.status = 'noMore'; // 没有更多数据
						} else {
							this.status = 'loading'; // 没有更多数据
						}
					} else {
						this.$errorToast(res.Msg);
						this.status = "noMore"
						return;
					}
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.container {
		.list {
			.title {
				padding-top: 10px;
				margin-left: 10px;
				margin-bottom: 5px;
				color: #000000;
				font-weight: 600;
				font-size: 18px;
				line-height: 1.8;
			}

			.boxFormal {
				box-shadow: 2px 2px 5px #ccc;
				border-radius: 5px;
				/* position: relative; */
				background-color: #fff;
				width: 95%;
				/* height: 80px; */
				padding-bottom: 10px;
				margin: 3px auto;
				margin-bottom: 10px;
			}
		}

		.height {
			height: 200px;
		}

		.excelBox {
			border: 1px dashed #bdbbbb;
			height: 200px;
			overflow: auto;
			padding: 10px;
			margin: 10px;
		}

		/* 覆盖van-button的默认样式 */
		.van-button {
			padding: 0 10px 0 10px !important;
			position: relative;
		}

		.excel {
			.excelItem {
				// box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 5px 5px;
				margin: 15px;
				// border-radius: 10px;
				border-bottom: 1px solid #e3e1e1;
				padding-bottom: 10px;

				.login-btn {
					padding: 1rem 1.5rem;

					>button {

						border-radius: 7px;
						font-size: 14px;
					}
				}

				.excelTitle {}

				.excelListItem,
				.excelTitle {
					//   margin-bottom: 8px;
					font-size: 14px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 5px;
				}

				.excelListItem.button {
					// display: flex;
					// justify-content: flex-end;
				}

				.submitDownButton {
					width: 15%;
					padding: 8px 0;
					color: #fff;
					font-size: 10px;
					border: none;
					background-color: #1989fa;
					border-radius: 5px;
					margin-top: 10px;
				}
			}
		}
	}
</style>